<template>
  <div id="group-admin-body">
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <h1 class="mui-title">分组管理</h1>
      <a class="mui-icon mui-icon-plusempty mui-pull-right" @click="addGroup"></a>
    </header>
    <div class="group-list margin-top-60 w-panel">
      <div  class="mui-input-row group-item" v-for="(groupItem,index) in groupList">
        <label></label>
        <input type="text" placeholder="请输入好友分组" v-model="groupItem.friend_group_name" />
        <div class="group-admin-action">
          <span class="mui-icon mui-icon-compose"  @click="saveGroup(groupItem.friend_group_id,groupItem.friend_group_name)"></span>
          <span class="mui-icon mui-icon-trash" :groupItem="index" @click="delGroup(groupItem.friend_group_id,index)"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";


export default {
  data() {
    return {
        groupList : []
    };
  },
  methods: {
    goBack: function() {
      this.$router.go(-1);
    },
    delGroup : function(group_id,index){
        axios({
            method : 'post',
            url : api.friend.delGroup,
            data : {
                friend_group_id : group_id
            }
        }).then((res) => {
            res = res.data;
            if(res.code){
                var nowNode = document.querySelector('[groupItem="' + index + '"]');
                var nowItemNode = nowNode.parentNode.parentNode;
                nowItemNode.parentNode.removeChild(nowItemNode);
            }
            Toast(res.msg);
        });
    },
    saveGroup : function(group_id,group_name){
        var updateData = {
            friend_group_id : group_id,
            friend_group_name : group_name
        };
        axios({
            url : api.friend.editGroup,
            method : 'post',
            data : updateData
        }).then((res) => {
            Toast(res.data.msg);
        });
    },
    addGroup : function(){
        var group_name = prompt("请输入分组名");
        if(group_name == null || group_name == ""){
            return false;
        }
        axios({
            url : api.friend.addGroup,
            method : 'post',
            data :{
                friend_group_name : group_name
            }
        }).then((res) => {
            res = res.data;
            if(res.code){
                this.groupList.push(res.data);
            }
            Toast(res.msg);
        });
    }
  },
  created() {
      axios({
          url : api.friend.getGroupList,
          method : 'post'
      }).then((res) => {
          this.groupList = res.data.data;
      });
  },
};
</script>
<style>
.group-item {
  display: flex;
  flex-wrap: nowrap;
}
.group-item label {
  width: 10%;
}
.group-item .group-admin-action {
  display: flex;
  flex-wrap: nowrap;
  line-height: 40px;
  margin-left: 15px;
  float: right;
}
.group-item .group-admin-action span {
  line-height: 40px;
  width: 33px;
}
.group-item .group-admin-action span.mui-icon-trash {
  color: red;
}
.group-item .group-admin-action span.mui-icon-compose {
  color: #007aff;
}
</style>